$f: 19.2;
body{
  background: #F5F7FA;
}

.home {
  .banner {
    margin-top: 80/$f+vw;
    position: relative;

    img {
      width: 100%;
      display: block;
      object-fit: cover;
    }
  }

  .main {
    margin: 60/$f+vw 260/$f+vw 80/$f+vw 260/$f+vw;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26/$f+vw 20/$f+vw;
    .item{
      background: white;
      height: 400/$f+vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 600ms;
      .icon{
        img{
          width: 80/$f+vw;
          height: 80/$f+vw;
          display: block;
          transition: all 600ms;
        }
      }
      .p1{
        margin: 34/$f+vw 0 16/$f+vw 0;
        font-size: 24/$f+vw;
        font-weight: 500;
      }
      .des{
        color: #333;
        font-size: 20/$f+vw;
        line-height: 1.35;
        text-align: center;
        font-weight: 300;
      }
      &:hover{
        box-shadow: 0 0 10px rgba(0,0,0,.2);
        .icon{
          img{
            transform: rotateY(360deg);
          }
        }
      }
    }
  }
  @media screen and (max-width: 1024px){
    .banner{
      margin-top: 60px;
    }
    .main{
      margin: 20px 5%;
      grid-template-columns: repeat(1, 1fr);
      gap: 15px;
      .item{
        height: 200px;
        .icon{
          img{
            width: 40px;
            height: 40px;
          }
        }
        .p1{
          font-size: 20px;
          margin: 20px 0 10px 0;
        }
        .des{
          font-size: 18px;
        }
      }
    }
  }
}